/* 2. CSS样式 */
/* 原理1: 关于网页打开、展开出来的卡片动画 ->本质就是通过动画默认由 0像素 宽度逐渐展开 */
/* ->再设置相同时间播放动画的头像旋转动画 ->来实现一种效果: 卡片是由头像滚动生成的... */


* {
  padding: 0;
  margin: 0;
}

/* 2.1 */
html {
  width: 100%;
  height: 100%;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  background-image: linear-gradient(120deg, #e0c3fc, #8ec5fc 100%);
}

/* body {
  display: flex;
  justify-content: center;
  align-items: center;
} */

/* 2.1.1 配置包裹多项div子盒子标签的 shell 类名盒子样式 */
.shell {
  width: 330px;
  height: 100px;
  background-color: #fafafa;
  position: absolute;

  /* 2.2.5(改良) 使用transform属性将元素水平和垂直居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* overflow: hidden; 这里, 由于最终要求是, 点击、会出现多个子菜单项在 shell 外侧, 因此不能给 shell 设置超出隐藏！ */

  /* 2.3.end 使用shell动画 */
  animation: show-shell 0.5s forwards ease-in-out;
}

/* 2.3 定义shell动画 */
@keyframes show-shell {
  0% {
    width: 0;
    /* 动画开始时宽度为0 */
  }
}

/* 2.1.2 配置头像类名盒子对应样式 */
.photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  border: 5px solid #fafafa;
  /* 细节2: 说白了, 网页头像周围的白色边框, 本质就是一个粗点的白色边框== */

  /* 2.1.3 此时, 根据开发条件 ->需将当前头像 “定” 到 shell 盒子左外侧, 且为当前头像盒子宽度一半程度 */
  margin-left: -50px;
  /* (待定理解1) 为什么不用定位, 将头像盒子偏左移动? */
  /* 回答: 因为加上定位后, 会导致浏览器此时 “重新排版” 问题！！！ */

  /* 2.1.5 然后, 处理此时图片超出 photo 设置圆角半径后的像素大小 */
  overflow: hidden;

  /* 2.4.end 使用头像动画 */
  animation: rotate-photo 0.5s forwards ease-in-out;
}

/* 2.4 定义头像动画 */
@keyframes rotate-photo {
  100% {
    transform: rotate(-360deg);
    /* 动画结束时旋转-360度 */
  }
}

/* 2.1.4 同步 头像盒子 内部img图片宽度与 头像盒子 宽度一致 */
.photo img {
  width: 100%;
}

/* 要求: content带有10内边距、(text样式为上外边距20像素+左外边距为50像素) */
/* 2.2 处理 内容盒子 相关样式 */
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  top: 0;
  left: 0;

  /* 2.2.6 隐藏新盖在content上的伪元素、超出的部分大小 */
  overflow: hidden;
  /* background-color: pink; */
}

/* 2.2.1 设置盒模型为border-box, 防止content超出默认设置大小 */
.photo,
.content {
  box-sizing: border-box;
}

/* 2.2.2 处理content中的text类 */
.content .text {
  margin-top: 20px;
  margin-left: 50px;
}

/* 2.2.3 text类中对应标题标签样式 */
.content .text h3,
.content .text h6 {
  font-weight: normal;
  /* 设置字体粗细为正常*/
  margin: 3px 0;
  /* 设置外边距为3像素的上下外边距，0像素的左右外边距*/
  letter-spacing: 0.5px;
  /* 设置字母间距为0.5像素*/
  white-space: nowrap;
  /* 设置不换行 */
  color: #fff;
}

/* 2.2.4 设置一个伪元素、盖在content上, 并且旋转一定角度, 实现一种 "半梯形" 背景色的效果 */
.content::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 150px;
  top: -20px;
  left: 0px;
  /* 2.2.7 将伪元素往上移动20像素, 让其贴着content左上角 */

  /* 细节1: 这里, 设置 负值的z-index, 就是为了处理文字被此伪元素盖住的情况 */
  /* 而后, 多个absolute嵌套后, 伪元素参照的是content进行堆叠 */
  /* 所以, 最终: 文字盖在伪元素before上、伪元素背景色充当了content的背景色(content没有背景色) */
  z-index: -1;
  transform: rotate(-8deg);
  background-image: linear-gradient(to top, #6866ee 0%, #fbc8d4 100%);
}